<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form id="formId" class="layui-form layui-form-pane" action="">
	  		<div class="layui-form-item">
	   			 <label class="layui-form-label">商品名称</label>
	    		<div class="layui-input-block">
	    			  <input type="text" name="name" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
	    		</div>
	  		</div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">请选择分类</label>
	    <div class="layui-input-inline">
	      <select lay-filter="filter">
	        <option>一级分类</option>
	        <c:forEach items="${topCategoryList}" var="category">
	        	<option value="${category.id}">${category.name}</option>
	        </c:forEach>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select id="categoryId" name="categoryId">
	        <option>二级分类</option>
	      </select>
	    </div>
    </div>
    
	<div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-block">
	      <input type="text" name="price" lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
	    </div>
	</div>
	  
	<div class="layui-form-item">
	    <label class="layui-form-label">商品库存</label>
	    <div class="layui-input-block">
	      <input type="text" name="stock" lay-verify="required" placeholder="请输入商品库存" autocomplete="off" class="layui-input">
	    </div>
	</div>
	  
	<div class="layui-form-item">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="在售" checked="checked">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
  	</div>
  	
  	<div class="layui-form-item">
	    <label class="layui-form-label">图片上传</label>
	    <div class="layui-input-inline layui-upload">
			  <div class="layui-upload-list">
			  	  <input type="hidden" name="mainImage"/>
				  <img class="layui-upload-img" width="150px" height="150px" id="mainImage">
				  <p id="demoText"></p>
			  </div>
		  	<button type="button" class="layui-btn" id="uploadImag">上传图片</button>
	    </div>
  	</div>
  	
  	
	
	<div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea id="detailId" placeholder="请输入内容" name="detail" class="layui-textarea"></textarea>
	    </div>
	</div>
	<button type="button" class="layui-btn" onclick="submitForm()">提交</button>
	</form>
	
	<script src="${path}/static/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['form','upload'],function(){
			var form = layui.form;
			var upload = layui.upload;
			
			//layui监听下拉框事件
			form.on('select(filter)',function(data){
				console.log(data.elem);	//得到select原始dom对象
				console.log(data.value);//得到被选中的value值
				console.log(data.othis);//得到美化之后的DOM对象
				$.post(
						'${path}/category/selectSecondCategoryListByTopCategoryId.action',
						{'id' : data.value},
						function(jsonResult){
							var list = jsonResult.data;
							$('#categoryId option:gt(0)').remove();
							$(list).each(function(){
								console.log(this.name);
								$('#categoryId').append('<option value="'+this.id+'">'+this.name+'</option>');
								// 刷新下拉框
								form.render('select');
							});
						},
						'json'
					)
				
			})
			
			//普通图片上传
			 var uploadInst = upload.render({
			   elem: '#uploadImag'
			   ,url: '${path}/upload/uploadImage.action' //改成您自己的上传接口
			   ,before: function(obj){
			     //预读本地文件示例，不支持ie8
			     obj.preview(function(index, file, result){
			       $('#mainImage').attr('src', result); //图片链接（base64）
			     });
			   }
			   ,done: function(jsonResult){
				   if (jsonResult.ok) {
					var fileName = jsonResult.data;
					$('input[name="mainImage"]').val(fileName);
				}
			   }
			   ,error: function(){
			     //演示失败状态，并实现重传
			     var demoText = $('#demoText');
			     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			     demoText.find('.demo-reload').on('click', function(){
			       uploadInst.upload();
			     });
			   }
			 });
		
		});
		
		function submitForm() {
			$.post(
					'${path}/product/insert.action',
					$('#formId').serialize(),	//拿到form表单中的所有元素
					function(jsonResult){
						console.log(jsonResult);
						if (jsonResult.ok) {
							//当你在iframe页面关闭自身时获得当前弹出框的index索引
	                        var index = parent.layer.getFrameIndex(window.name);
							layer.msg(
									jsonResult.msg,
									{icon : 1 , time : 2000},
									function(){	//msg消失之后触发函数
										//关闭弹出层
										parent.layer.close(index);
										//刷新父界面
										window.parent.location.reload();
									}
								);
						} else {
							mylayer.errorMsg(jsonResult.msg);
						}
					},
					'json'
				);
		}

		KindEditor.ready(function(K) {
		    var kingEditorParams = {
		         afterBlur: function () { this.sync(); }
		    }
		    KindEditor.create('#detailId', kingEditorParams);
		});
		
	</script>
</body>
</html>